<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="background-color: #FFFFFF;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Style settings
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.lineWidth = 2.5;

    // Helper function to draw an arrowhead
    function drawArrowhead(ctx, fromX, fromY, toX, toY, radius) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        const x = toX;
        const y = toY;

        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - radius * Math.cos(angle - Math.PI / 7), y - radius * Math.sin(angle - Math.PI / 7));
        ctx.lineTo(x - radius * Math.cos(angle + Math.PI / 7), y - radius * Math.sin(angle + Math.PI / 7));
        ctx.closePath();
        ctx.fill();
    }
    
    // Helper function to draw text with a subscript
    function drawTextWithSubscript(ctx, text, sub, x, y, font, subFont) {
        ctx.font = font;
        const textMetrics = ctx.measureText(text);
        const textWidth = textMetrics.width;
        ctx.fillText(text, x, y);

        ctx.font = subFont;
        ctx.fillText(sub, x + textWidth * 0.9, y + 6);
    }


    // Draw film surfaces
    // Top surface (slightly angled)
    ctx.beginPath();
    ctx.moveTo(50, 150);
    ctx.lineTo(350, 155);
    ctx.stroke();

    // Bottom surface (horizontal)
    ctx.beginPath();
    ctx.moveTo(50, 210);
    ctx.lineTo(350, 210);
    ctx.stroke();

    // --- Draw Rays ---

    // Path 1: Ray that transmits, reflects internally, and exits
    const p1_in = {x: 150, y: 50};
    const p1_top_in = {x: 170, y: 151};
    const p1_bottom = {x: 177, y: 210};
    const p1_top_out = {x: 184, y: 151.7};
    const p1_out = {x: 204, y: 50};

    // Path 2: Ray that reflects from the top surface
    const p2_in = {x: 165, y: 50};
    const p2_top = {x: 185, y: 151.8};
    const p2_out = {x: 205, y: 50};

    // Draw lines for the rays
    ctx.beginPath();
    // Path 1
    ctx.moveTo(p1_in.x, p1_in.y);
    ctx.lineTo(p1_top_in.x, p1_top_in.y); // Incident
    ctx.lineTo(p1_bottom.x, p1_bottom.y); // Transmitted
    ctx.lineTo(p1_top_out.x, p1_top_out.y); // Reflected from bottom
    ctx.moveTo(p1_top_out.x, p1_top_out.y); // Separate path to avoid joining issue
    ctx.lineTo(p1_out.x, p1_out.y); // Transmitted out
    
    // Path 2
    ctx.moveTo(p2_in.x, p2_in.y);
    ctx.lineTo(p2_top.x, p2_top.y); // Incident
    ctx.lineTo(p2_out.x, p2_out.y); // Reflected from top
    ctx.stroke();


    // --- Draw Arrowheads ---
    const arrowSize = 10;
    // Arrow on incident rays (placed in the middle of the two)
    drawArrowhead(ctx, 157.5, 50, 177.5, 151.4, arrowSize);
    
    // Arrow on the internally reflected ray
    drawArrowhead(ctx, p1_bottom.x, p1_bottom.y, p1_top_out.x, p1_top_out.y, arrowSize);
    
    // Arrow on the outgoing reflected rays (placed in the middle of the two)
    drawArrowhead(ctx, 204.5, 50.5, 184.5, 151.75, arrowSize);
    

    // --- Draw Labels ---
    const mainFont = "italic bold 26px 'Times New Roman'";
    const subFont = "bold 18px 'Times New Roman'";

    // I₀ label
    drawTextWithSubscript(ctx, "I", "0", 120, 100, mainFont, subFont);

    // RI₀ label (top)
    drawTextWithSubscript(ctx, "RI", "0", 220, 100, mainFont, subFont);
    
    // Short vertical line near top RI₀
    ctx.beginPath();
    ctx.moveTo(225, 65);
    ctx.lineTo(225, 85);
    ctx.stroke();

    // RI₀ label (middle)
    drawTextWithSubscript(ctx, "RI", "0", 195, 190, "italic bold 24px 'Times New Roman'", "bold 16px 'Times New Roman'");

    // Fig. 2.16 label
    ctx.font = "bold 24px 'Times New Roman'";
    ctx.fillText("Fig. 2.16", 160, 260);

</script>
</body>
</html>